<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">提交订单</view>
		</view>	
		<view class="clear_box"></view>
		
		<view class="address_box" :data-url="'/pages/goods/my'" @click="gotopage">
			<view class="icon iconfont icon-tuandui"></view>
			<view class="text_box" v-if="address">
				<view class="name_box">
					<view class="name">{{address.name}}</view>
					<view class="phone">{{address.phone}}</view>
					<view class="arrow iconfont icon-xiangyou1"></view>
				</view>
				<view class="address">微信号:{{address.text}}</view>
			</view>
			<view class="text_box" v-if="!address">
				<view class="add_box">
					<view class="text">添加个人信息</view>
					<view class="arrow iconfont icon-xiangyou1"></view>
				</view>
			</view>
		</view>
		
		
		<view class="content">
		
			<view class="goods_box">
				<image class="goods_img" :src="info.master_image" mode="scaleToFill"></image>
				<view class="text_box">
					<view class="title">{{info.title}}</view>
					<!-- <view class="text">
								<view class="n">{{ item02.sku_name }}</view>
							</view> -->
					<view class="show">
						<view class="money_box">
							￥{{info.discount_price}}
						</view>
						<view class="menu">x1</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="address_list">
				<view class="title">配送方式</view>
				<view class="text">普通配送</view>
			</view> -->
			<view class="address_list" :data-url="'/pages/coupon/coupon02'" @click="gotopage" v-if="coupon.length > 0">
				<view class="title">优惠劵</view>
				<view class="text">减{{coupon_fee}}</view>
				<view class="arrow iconfont icon-xiangyou1"></view>
			</view>
			<view class="address_list">
				<view class="title">订单备注</view>
				<input type="text" v-model="remark" value="" placeholder="选填，请先和商家协商一致" />
			</view>
		
		</view>
		<view class="footer">
			<!-- <view class="rule">此商品为活动特价商品，非质量问题暂不支持退换货！</view> -->
			<view class="menu_box">
				<view class="menu">实付款：<view class="m">￥{{total | setValueData}}</view></view>
				<view class="menu" @tap="autoShowBox">确认并支付</view>
			</view>
		</view>
		<!-- <view class="confirm" @tap="autoShowBox">确认付款</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponData: '',
				page:1,
				scrrol:false,
				info:'',
				address: {
					name: '请输入订单信息',
					phone: '',
					text: ''
				},
				sys_id:0,
				coupon:[],
				coupon_id:0,
				total:0,
				coupon_fee:0,
				sys_money:0,
				remark:'',
			}
		},
		filters: {
			setValueData(num) {
				let realVal = parseFloat(num).toFixed(2);
				if (realVal <= 0){
					realVal = 0.10;
				}
				return realVal;
			},
		},
		onLoad(e) {
			let that = this;
			that.sys_id = e.o_id;
			that.loadData();
			that.loadAddress();
		},
		onShow(){
			let that = this;
			let coupon_load = uni.getStorageSync('coupon_load');
			if (coupon_load){
				that.loadAddress();
				uni.removeStorageSync('coupon_load');
			}
			if(that.couponData){
				that.coupon_fee = that.couponData.value;
				that.coupon_id = that.couponData.vid;
				that.total = that.sys_money - that.couponData.value;
			}
			console.log(that.couponData)
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._get('auth/order/before', {id:that.sys_id}, res => {
					if (res.code == 200) {
						that.info = res.data.goods;
						that.coupon = res.data.coupon;
						that.total = res.data.goods.discount_price;
						that.sys_money = res.data.goods.discount_price;
						if (that.coupon.length > 0){
							that.coupon_id = that.coupon[0].id;
							that.coupon_fee = that.coupon[0].money;
							that.total = res.data.goods.discount_price - that.coupon[0].money;
						}
					}
				});
			},
			loadAddress(){
				let that = this;
				that.Net._get('auth/order/address', {}, res => {
					if (res.code == 200) {
						if (res.data){
							that.address.name = res.data.contract_name;
							that.address.phone = res.data.phone;
							that.address.text = res.data.wechat;
						}
					}
				});
			},
			autoShowBox(){
				let that = this;
				if (!that.address.name || !that.address.phone || that.address.name=='请输入订单信息'){
					that.Msg.Fail('请填写联系信息');
					return;
				}
				that.Net._post('auth/order/create',{sys_id:that.sys_id,coupon_id:that.coupon_id,remark:that.remark}, res => {
					if(res.code == 200){
						let orderId = res.data.id;
						that.Net._post('auth/order/pay', { order_id: orderId}, rex => {
							if (rex.code == 200) {
								let orderData = rex.data;
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp:orderData.timeStamp,
									nonceStr: orderData.nonceStr,
									package: orderData.package,
									signType: orderData.signType,
									paySign: orderData.paySign,
									success: function(res) {
										uni.showModal({
											title: '提示',
											content: '购买成功',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													//console.log('用户点击确定');
													uni.setStorageSync('order_list', 1);
													uni.switchTab({
														url: '/pages/order/order'
													});
												} else if (res.cancel) {
													console.log('用户点击取消');
												}
											}
										});
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										uni.setStorageSync('order_list', 1);
										console.log('fail:' + JSON.stringify(err));
										uni.switchTab({
											url: '/pages/order/order'
										});
									}
								});
							}
						});	
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>

	.scrrolHeader{
		background-color: #FF7701 !important;
	}
	
	.address_box {
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 5vw 4%;
		border-radius: 4vw;
	}
	
	.address_box .icon {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		font-size: 5vw;
		color: #fff;
		background-color: #FF7701;
		margin-right: 3vw;
	}
	
	.address_box .text_box {
		flex: 1;
	}
	
	.address_box .text_box .name_box {
		width: 100%;
		display: flex;
	}
	
	.address_box .text_box .name_box .name {
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		line-height: 6vw;
	}
	
	.address_box .text_box .name_box .phone {
		font-size: 3.5vw;
		color: #999;
		line-height: 6vw;
		margin-left: 3vw;
	}
	
	.address_box .text_box .name_box .arrow {
		font-size: 4vw;
		color: #999;
		line-height: 6vw;
		flex: 1;
		text-align: right;
	}
	
	.address_box .text_box .address {
		font-size: 3.4vw;
		color: #666;
		line-height: 5vw;
		margin-top: 1.5vw;
	}
	
	.address_box .text_box .add_box {
		display: flex;
		margin-top: 3vw;
	}
	
	.address_box .text_box .add_box .text {
		font-size: 3.5vw;
		color: #666;
		line-height: 6vw;
		flex: 1;
	}
	
	.address_box .text_box .add_box .arrow {
		font-size: 4vw;
		color: #999;
		line-height: 6vw;
		flex: 1;
		text-align: right;
	}
	
	.content {
		width: 92%;
		margin: 4% auto 0;
		background: #fff;
		border-radius: 4vw;
		padding: 4% 4%;
	}
	
	.content .goods_box {
		width: 100%;
		display: flex;
		margin-bottom: 2vw;
	}
	
	.content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin: 0 3vw;
	}
	
	.content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}
	
	.content .goods_box .text_box .title {
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.content .goods_box .text_box .text {
		margin-top: 2vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.content .goods_box .text_box .text .n {
		font-size: 3.2vw;
		color: #999;
	}
	
	.content .goods_box .text_box .text .m {
		font-size: 3.2vw;
		color: #999;
	}
	
	.content .goods_box .text_box .show {
		width: calc(100%);
		display: flex;
		position: relative;
		margin-top: 6vw;
	}
	
	.content .goods_box .text_box .show .money_box {
		width: 65%;
		display: flex;
		justify-content: flex-start;
		font-size: 4vw;
		color: #333333;
		line-height: 6vw;
		font-weight: bold;
	}
	
	.content .goods_box .text_box .show .money_box .no_money {
		color: #999;
		line-height: 6vw;
		position: relative;
		font-size: 3.5vw;
		margin-left: 0.5vw;
		font-weight: 500;
		margin-left: 1.5vw;
	}
	
	.content .goods_box .text_box .show .money_box .no_money .line {
		width: 100%;
		height: 1px;
		background-color: #999;
		position: absolute;
		top: calc(50% - 0vw);
		left: 0;
	}
	
	.content .goods_box .text_box .show .menu {
		line-height: 5vw;
		color: #999;
		font-size: 3.5vw;
		position: absolute;
		right: 0vw;
	}
	
	.address_list {
		width: 100%;
		height: 10vw;
		background-color: #fff;
		padding: 0 4%;
		display: flex;
		align-items: center;
	}
	
	.address_list .title {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		display: flex;
		align-items: center;
	}
	
	.address_list .title span {
		margin-left: 1vw;
		color: #ff7f22;
	}
	
	.address_list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #ff7f22;
		text-align: right;
	}
	
	.address_list .money {
		flex: 1;
		font-size: 3.5vw;
		color: #333333;
		text-align: right;
		font-weight: bold;
	}
	
	.address_list input {
		flex: 1;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}
	
	.address_list .coupon {
		color: #333333;
	}
	
	.address_list .arrow {
		font-size: 4vw;
		color: #999;
	}
	
	.footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}
	
	.footer .rule{
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		font-size: 3vw;
		color: #FF7F22;
		text-align: center;
		background-color: #f5fbfd;
	}
	
	.footer .menu_box{
		width: 100%;
		display: flex;
	}
	
	.footer .menu_box .menu{
		width: 50%;
		height: 13.5vw;
		line-height: 13.5vw;
		display: flex;
		justify-content: center;
		font-size: 4vw;
	}
	
	.footer .menu_box .menu .m{
		font-size: 4.5vw;
		font-weight: bold;
		color: #333333;
	}
	
	.footer .menu_box .menu:nth-child(1){
		background-color: #fff;
		color: #333;
	}
	
	.footer .menu_box .menu:nth-child(2){
		background-color: #FF7F22;
		color: #fff;
	}
	
	
	
	
</style>
